<template>
  <!--<el-scrollbar style="height: 100%">-->
    <div class="confirmTable" id="bizVideoHouseCertCanvas" :data="data">
      <el-row class="confirmTitle">{{option.title}}</el-row>
      <el-row class="confirmTableBody">
        <el-row v-for="(item, index) in option.column" :key="index">
          <el-row v-if="item.type == 'title'" :class="item.border">
            <el-col class="padding-style word-border-style" :span="24">{{item.label}}</el-col>
          </el-row>
          <el-row v-else-if="item.type == 'text'" :class="item.border">
            <el-col class="padding-style" :span="10">{{item.label}}：</el-col>
            <el-col class="padding-style txt-right" :span="14">{{data[item.prop]}}</el-col>
          </el-row>
          <el-row v-else-if="item.type == 'image'" :class="item.border">
            <el-col class="padding-sign-style" :span="24">{{item.label}}</el-col>
            <el-col class="padding-style txt-right peror-photo" :span="24">
              <img :src="data[item.prop]">
            </el-col>
          </el-row>
          <el-row v-else-if="item.type == 'span'" :class="item.border">
            <el-col class="padding-style text-indent" :span="24">{{data[item.prop]}}</el-col>
          </el-row>
        </el-row>
      </el-row>
      <el-row class="confirmTableBFooter">
        <el-col :span="6" class="footer-style">客服人员编号：</el-col>
        <el-col :span="6" class="footer-style word-border-style">{{data.managerNum}}</el-col>
        <el-col :span="6" class="footer-style">客服人员姓名：</el-col>
        <el-col :span="6" class="footer-style word-border-style">{{data.manager}}</el-col>
      </el-row>
    </div>
  <!--</el-scrollbar>-->
</template>
<script>
  export default {
    name: 'bizCertForm',
    components: {

    },
    props: ['data', 'option'],
    data () {
      return {}
    }
    ,
    created () {

    }
    ,
    mounted () {

    }
  }
</script>
<style scoped>

  .word-border-style {
    font-weight: bold;
  }

  .confirmTable {
    padding: 10px 20px;
    width: 100%;
  }

  .confirmTitle {
    text-align: center;
    height: 34px;
    line-height: 34px;
    font-weight: bold;
  }

  .confirmTableBody {
    width: 100%;
    /*border: 2px solid #0c0c0c;*/
    border-left: 2px solid #0c0c0c;
    border-right: 2px solid #0c0c0c;
    border-bottom: 2px solid #0c0c0c;
  }

  .padding-style {
    padding: 10px;
  }

  .padding-sign-style {
    padding: 10px 10px 0px;
  }

  .border-bottom-style {
    border-bottom: 1px solid #909399
  }

  .border-bottom-bold-style {
    border-bottom: 2px solid #0c0c0c;
  }

  .border-top-bold-style{
    border-top: 2px solid #0c0c0c;
  }

  .confirmTableBFooter {
    padding: 5px;
  }

  .footer-style {
    padding: 4px;
  }

  .text-indent{
    text-indent: 24px;
    line-height: 25px;
  }

  .peror-photo {
    height: 200px;
    width: 300px;
    overflow: hidden;
  }

  .customerFace .peror-photo{
    height: 270px !important;
  }

  .peror-photo img {
    height: 100%;
    width: 100%;
  }
</style>
